<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>页面管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
      <el-row>
        <el-form :model="wbpage" label-width="70px">
          <el-col :span="5">
            <el-form-item label="页面名称：" label-width="100px">
              <el-input v-model="wbpage.pageName"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-button type="primary" @click="search()" style="margin-left: 15px">查询</el-button>
        <el-button type="primary" style="margin-left: 15px" @click="addpage">新增页面</el-button>
      </el-row>
      <el-table
        :data="wbpagelist"
        border
        style="width: 100%">
        <el-table-column
          prop="pageName"
          label="页面名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="页面模板"
          align="center">
        </el-table-column>
        <el-table-column
          prop="dataUrl"
          label="数据接口URL"
          align="center">
        </el-table-column>
        <el-table-column
          prop="url"
          label="页面相对路径"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center">
          <template slot-scope="scope">
            {{scope.row.status==0?'未发布':'已发布'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="pubTime"
          label="发布时间"
          align="center">
          <template slot-scope="scope">
            {{scope.row.pubTime|datefmt("YYYY-MM-DD HH:mm:ss")}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-dropdown  size="mini" split-button type="primary" trigger="click">
              操作
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="scope.row.status==0" @click.native="adpage(scope.row)">发布</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status==0" @click.native="update(scope.row)">修改</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status==0" >删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="wbpage.id==null?'新增页面':'修改页面'"
        :visible.sync="DialogVisible"
        center :close-on-click-modal="false" @closed="createpage">
        <el-form ref="form" :model="wbpageform" label-width="80px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="页面名称：" label-width="120px">
                <el-input v-model="wbpageform.pageName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="模板选择：" label-width="120px">
                <el-select v-model="wbpageform.templateId" placeholder="请选择">
                  <el-option
                    v-for="item in temlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="数据接口URL：" label-width="120px">
                <el-input v-model="wbpageform.dataUrl"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="相对路径：" label-width="120px">
                <el-input v-model="wbpageform.url"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="DialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="savepage">确 定</el-button>
  </span>
      </el-dialog>
      </el-card>
    </div>
</template>

<script>
    export default {
        name: "Ymgl",
        data(){
          return{
            wbpage:{},
            wbpageform:{},
            DialogVisible:false,
            temlist:[],
            user:{},
            wbpagelist:[]
          }
        },
        methods:{
          adpage:function(row){
            this.$http.get("/finance-service-cms/wbpage/page/"+row.id).then(
              (res)=>{
                if(res.data.success){
                  this.$message({
                    message:res.data.message,
                    type: 'success'
                  });
                  this.search();
                }else{
                  this.$message.error(res.data.message);
                }
              });
          },
          savepage:function(){
            this.wbpageform.status=0;
            this.wbpageform.createUser=this.user.id;
            this.$http.post("/finance-service-cms/wbpage/addpage",this.wbpageform).then(
              (res)=>{
                if(res.data.success){
                  this.$message({
                    message:res.data.message,
                    type: 'success'
                  });
                  this.DialogVisible=false;
                  this.adform={picPath:''};
                  this.search();
                }else{
                  this.$message.error(res.data.message);
                }
              });
          },
          createpage:function(){
            this.DialogVisible=false;
            this.wbpageform={};
          },
          update:function(row){
            this.wbpageform=row;
            this.DialogVisible=true;
          },
          findtem:function(){
            this.$http.get("/finance-service-cms/template/temlist").then(
              (res)=>{
                if(res.data.success){
                  this.temlist=res.data.result;
                }else{
                  this.$message.error(res.data.message);
                }
              }
            );
          },
          addpage:function(){
            this.DialogVisible=true;
          },
          search:function () {
            this.$http.post("/finance-service-cms/wbpage/wbpagelist",this.wbpage).then(
              (res)=>{
                if(res.data.success){
                  this.wbpagelist=res.data.result;
                }else{
                  this.$message.error(res.data.message);
                }
              }
            );
          }
        },
        mounted() {
          this.user=JSON.parse(sessionStorage.getItem("user"));
          this.search();
          this.findtem();
        }
    }
</script>

<style scoped>

</style>
